<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI设计 - 产品中心</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 轮播图样式 */
        .carousel-container {
            max-width: 800px;
            margin: 2rem auto;
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .carousel-wrapper {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        .carousel-slides {
            display: flex;
            width: 500%;
            height: 100%;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-slide {
            width: 20%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .carousel-slide:nth-child(1) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .carousel-slide:nth-child(2) {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .carousel-slide:nth-child(3) {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .carousel-slide:nth-child(4) {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .carousel-slide:nth-child(5) {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .slide-content {
            text-align: center;
        }

        .slide-content h3 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .slide-content p {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        /* 导航按钮 */
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.8);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5rem;
            color: #333;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .carousel-nav:hover {
            background: rgba(255, 255, 255, 0.95);
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-prev {
            left: 20px;
        }

        .carousel-next {
            right: 20px;
        }

        /* 圆点指示器 */
        .carousel-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .carousel-dot.active {
            background: white;
            transform: scale(1.2);
        }

        .carousel-dot:hover {
            background: rgba(255, 255, 255, 0.8);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .carousel-container {
                margin: 1rem;
            }
            
            .carousel-wrapper {
                height: 300px;
            }
            
            .slide-content h3 {
                font-size: 1.8rem;
            }
            
            .slide-content p {
                font-size: 1rem;
            }
            
            .carousel-nav {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }
            
            .carousel-prev {
                left: 10px;
            }
            
            .carousel-next {
                right: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>UI设计服务</h1>
        </header>

        <nav class="navigation">
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="home">首页 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="home-submenu">
                        <li><a href="index.html">网站首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="news.html">最新消息</a></li>
                        <li><a href="todo.html">待办事项</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="products">产品中心 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="products-submenu">
                        <li><a href="products-web.html">网站开发</a></li>
                        <li><a href="products-mobile.html">移动应用</a></li>
                        <li><a href="products-design.html">UI设计</a></li>
                        <li><a href="products-seo.html">SEO优化</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="services">服务支持 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="services-submenu">
                        <li><a href="service-tech.html">技术支持</a></li>
                        <li><a href="service-training.html">培训服务</a></li>
                        <li><a href="service-maintenance.html">维护服务</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="company">公司信息 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="company-submenu">
                        <li><a href="company-profile.html">公司简介</a></li>
                        <li><a href="company-team.html">团队介绍</a></li>
                        <li><a href="company-history.html">发展历程</a></li>
                        <li><a href="company-culture.html">企业文化</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="contact">联系我们 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="contact-submenu">
                        <li><a href="contact-info.html">联系方式</a></li>
                        <li><a href="contact-form.html">在线留言</a></li>
                        <li><a href="contact-map.html">地图位置</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <main class="main-content">
            <div class="page-content">
                <h2>专业UI设计服务</h2>
                
                <div class="content-section">
                    <p>我们提供专业的用户界面设计服务，从品牌视觉到交互体验，为您打造美观易用的数字产品。</p>
                </div>

                <!-- 轮播图 -->
                <div class="carousel-container">
                    <div class="carousel-wrapper">
                        <div class="carousel-slides" id="carouselSlides">
                            <div class="carousel-slide">
                                <div class="slide-content">
                                    <h3>品牌视觉设计</h3>
                                    <p>专业的品牌标识与视觉系统设计</p>
                                </div>
                            </div>
                            <div class="carousel-slide">
                                <div class="slide-content">
                                    <h3>网页界面设计</h3>
                                    <p>现代化的网页UI设计与用户体验</p>
                                </div>
                            </div>
                            <div class="carousel-slide">
                                <div class="slide-content">
                                    <h3>移动端设计</h3>
                                    <p>精美的手机APP界面设计</p>
                                </div>
                            </div>
                            <div class="carousel-slide">
                                <div class="slide-content">
                                    <h3>交互原型设计</h3>
                                    <p>高保真交互原型与用户流程</p>
                                </div>
                            </div>
                            <div class="carousel-slide">
                                <div class="slide-content">
                                    <h3>设计系统构建</h3>
                                    <p>完整的设计组件库与规范</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 导航按钮 -->
                        <button class="carousel-nav carousel-prev" id="prevBtn">‹</button>
                        <button class="carousel-nav carousel-next" id="nextBtn">›</button>
                        
                        <!-- 圆点指示器 -->
                        <div class="carousel-dots" id="carouselDots">
                            <span class="carousel-dot active" data-slide="0"></span>
                            <span class="carousel-dot" data-slide="1"></span>
                            <span class="carousel-dot" data-slide="2"></span>
                            <span class="carousel-dot" data-slide="3"></span>
                            <span class="carousel-dot" data-slide="4"></span>
                        </div>
                    </div>
                </div>

                <div class="product-grid">
                    <div class="product-card">
                        <h4>UI/UX设计</h4>
                        <p>专注于用户体验的界面设计，让您的产品更加易用美观。</p>
                        <ul class="product-features">
                            <li>用户研究与分析</li>
                            <li>信息架构设计</li>
                            <li>交互原型制作</li>
                            <li>视觉界面设计</li>
                            <li>可用性测试</li>
                        </ul>
                    </div>

                    <div class="product-card">
                        <h4>品牌设计</h4>
                        <p>从LOGO到整套视觉识别系统，塑造独特的品牌形象。</p>
                        <ul class="product-features">
                            <li>品牌策略规划</li>
                            <li>LOGO标志设计</li>
                            <li>视觉识别系统</li>
                            <li>品牌应用设计</li>
                            <li>品牌指导手册</li>
                        </ul>
                    </div>

                    <div class="product-card">
                        <h4>响应式设计</h4>
                        <p>适配各种设备屏幕的响应式界面设计解决方案。</p>
                        <ul class="product-features">
                            <li>多设备适配</li>
                            <li>弹性布局设计</li>
                            <li>触控交互优化</li>
                            <li>性能优化设计</li>
                            <li>跨平台一致性</li>
                        </ul>
                    </div>
                </div>

                <div class="content-section">
                    <h3>设计流程</h3>
                    <p>我们遵循专业的设计流程：需求调研 → 用户分析 → 概念设计 → 原型制作 → 视觉设计 → 测试优化 → 交付实施。</p>
                    
                    <h3>设计工具</h3>
                    <p>使用行业标准的设计工具：Figma、Sketch、Adobe Creative Suite、Principle、Framer等，确保设计质量和效率。</p>
                </div>
                
                <div class="back-link">
                    <a href="index.html" class="btn-back">← 返回首页</a>
                </div>
            </div>
        </main>

        <footer>
            <p>&copy; 2024 导航菜单项目. 保留所有权利.</p>
        </footer>
    </div>

    <script src="script.js"></script>
    <script>
        // 轮播图功能实现
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.getElementById('carouselSlides');
            const dots = document.querySelectorAll('.carousel-dot');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const carouselContainer = document.querySelector('.carousel-container');
            
            let currentSlide = 0;
            const totalSlides = 5;
            let autoPlayInterval;
            
            // 更新轮播图位置
            function updateCarousel() {
                const translateX = -currentSlide * 20; // 每个幻灯片占20%宽度
                slides.style.transform = `translateX(${translateX}%)`;
                
                // 更新圆点状态
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentSlide);
                });
            }
            
            // 下一张幻灯片
            function nextSlide() {
                currentSlide = (currentSlide + 1) % totalSlides;
                updateCarousel();
            }
            
            // 上一张幻灯片
            function prevSlide() {
                currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                updateCarousel();
            }
            
            // 跳转到指定幻灯片
            function goToSlide(slideIndex) {
                currentSlide = slideIndex;
                updateCarousel();
            }
            
            // 开始自动播放
            function startAutoPlay() {
                autoPlayInterval = setInterval(nextSlide, 3000); // 每3秒切换
            }
            
            // 停止自动播放
            function stopAutoPlay() {
                clearInterval(autoPlayInterval);
            }
            
            // 绑定事件监听器
            nextBtn.addEventListener('click', () => {
                nextSlide();
                stopAutoPlay();
                startAutoPlay(); // 重新开始自动播放
            });
            
            prevBtn.addEventListener('click', () => {
                prevSlide();
                stopAutoPlay();
                startAutoPlay(); // 重新开始自动播放
            });
            
            // 圆点点击事件
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    goToSlide(index);
                    stopAutoPlay();
                    startAutoPlay(); // 重新开始自动播放
                });
            });
            
            // 鼠标悬浮停止自动播放
            carouselContainer.addEventListener('mouseenter', stopAutoPlay);
            carouselContainer.addEventListener('mouseleave', startAutoPlay);
            
            // 键盘控制
            document.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowLeft') {
                    prevSlide();
                    stopAutoPlay();
                    startAutoPlay();
                } else if (e.key === 'ArrowRight') {
                    nextSlide();
                    stopAutoPlay();
                    startAutoPlay();
                }
            });
            
            // 初始化
            updateCarousel();
            startAutoPlay();
            
            // 页面可见性API - 当页面不可见时停止自动播放
            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    stopAutoPlay();
                } else {
                    startAutoPlay();
                }
            });
        });
    </script>
</body>
</html> 